@import "bourbon/bourbon";

html { padding: 0; overflow-x: hidden; }

form { margin: 0; }

body {
  &, input {
    font-family: helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
  }
  line-height: 1.6em;
  padding: 10px;
  margin: 0;
  background-color: #fff;
  img { vertical-align: middle; }
  * { @include box-sizing(border-box); }
}

.pull-right { float: right; }

.container, section, header, footer {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

header {
  position: relative;
  line-height: 1;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
  box-shadow: inset d 0 3px black;
  @include clearfix;
}

section {
  @include clearfix;
  overflow: hidden;
  &.story.queued, &.groups, &.list {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
}

.story.queued .button { display: inline-block; }
.story .button { display: none; }
.story .emoji { margin-bottom: 4px; }
.loading {
  background-color: #fff;
  padding: 100px 0 120px;
  text-align: center;
  text-transform: uppercase;
  color: #999;
  letter-spacing: 2px;
  font-weight: bold;
  & + .no-result { display: none; }
}

.label {
  font-weight: bold;
  color: #368;
  border-radius: 2px;
  line-height: 1;
  padding: 6px 10px;
  margin: 0 0 10px 0;
  border: 1px solid #cde;
  @include inline-block;
  &:before {
    content: attr(href);
  }
  &.active {
    background-color: #def;
  }
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #08c;
  img { width: 16px; height: 16px; }
}

input:invalid { visibility: hidden; }

ul {
  text-align: left;
  padding: 0;
  margin: 0;
}

.plain {
  @include appearance(none);
  border: 0;
  box-shadow: none;
  background-color: transparent;
  &:focus {
    box-shadow: none; outline: none;
  }
}

.emoji-group {
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: 20px;
  padding: 10px 0;
}

.emoji-wrapper {
  @include inline-block;
  margin: 0;
  width: 180px;
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  .keywords {
    font-size: 0;
  }
  .emoji {
    position: absolute;
  }
  input { margin-left: 25px; }
}

ul.hide-text {
  .emoji-wrapper {
    width: 30px;
    .emoji {  @include transform(scale(1)); }
  }
  input { display: none; }
}

ul, li {
  list-style-type: none;
}

.button {
  line-height: 1;
  padding: 10px 9px 9px;
  margin-left: 10px;
  @include inline-block;
  vertical-align: bottom;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #ace;
  text-transform: uppercase;
  font-weight: bold;
  &.small {
    padding: 5px;
  }
  &:hover {
    background-color: #36a;
    border-color: #36a;
    color: #fff;
  }
}

.input-search {
  min-height: 34px;
  padding: 7px 8px;
  outline: none;
  color: #333;
  background-color: #fafafa;
  background-repeat: no-repeat;
  background-position: right center;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
  @include transition(all 0.2s ease-in);
  width: 240px;
  @include appearance(textfield);
  &:hover { background-color: #fff; }
  &:focus {
    border-color: #51a7e8;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5);
  }
  &::-webkit-search-cancel-button, &::-webkit-search-decoration {
    -webkit-appearance: none;
  }
}

input.queue {
  width: 400px;
  text-align: center;
  padding: 4px;
}
.story {
  img { width: 20px; }
}
.alert { font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: none; position: fixed; margin: auto; left: 50%; width: 200px; margin-left: -100px; top: 10px; background: rgba(10,50,90,0.7); color: #fff; font-weight: bold; padding: 7px; text-align: center; border-radius: 5px; }
.emoji { @include inline-block; text-indent: -9999px; overflow: hidden; @include transform(scale(0.8)); cursor: pointer; }
[data-clipboard-text] { cursor: pointer; }

.no-result {
  background-color: #f9f9f9;
  padding: 30px;
  text-align: center;
  margin-bottom: 10px;
  border-radius: 3px;
}

code {
  background-color: #f8f8f8;
  border: 1px solid #aaa;
  padding: 0 2px;
  border-radius: 3px; color: #666;
  font-family: Monaco, monospace;
  font-size: 11px;
}

.tips {
  color: #777;
}

@media (max-width: 480px) {
  .input-search { width: 60px; position: absolute; &:focus { width: 100%; } }

  section input.queue { width: 100%; }

  input { font-size: 14px; }

  ul { padding: 0; }

  .emoji-wrapper { padding: 0; }
}
